<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蒙太对话框</title>
    <style>
        .content{
            /*height: 800px;*/
            background-color: white;
        }
        .shade{
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: darkgray;
            opacity: 0.4;
        }
        .hide {
            display: none;
        }
        .mode{
            width: 200px;
            height: 200px;
            background-color: palevioletred;
            position: absolute;
            /*z-index:100000;*/
            margin-top: 360px;
            margin-left: 800px;
            /*top:50%;*/
            /*left: 40%;*/
        }


    </style>
</head>
<body>
<div class="content">
    <button onclick="show()">show</button>
</div>
<div class="shade hide">

</div>
<div class="mode hide">
    <button onclick="cancle()">cancle</button>
</div>

<script>
    function show() {
        var shade = document.getElementsByClassName('shade')[0];
        var mode = document.getElementsByClassName('mode')[0];
        shade.classList.remove('hide');
        mode.classList.remove('hide');
    }
    function cancle() {
        var shade = document.getElementsByClassName('shade')[0];
        var mode = document.getElementsByClassName('mode')[0];
        shade.classList.add('hide');
        mode.classList.add('hide');

    }
</script>

</body>
</html>